<template>
    <div class="min-h-screen bg-background">
      <!-- 导航栏 -->
      <nav
        class="fixed top-0 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 z-50 border-b">
        <div class="container flex h-14 items-center">
          <div class="mr-4 flex">
            <a class="mr-6 flex items-center space-x-2" href="/">
              <span class="font-bold sm:inline-block">
                热爱可抵岁月漫长
              </span>
            </a>
          </div>
          <div class="flex flex-1 items-center justify-between space-x-2 md:justify-end">
            <nav class="flex items-center space-x-6">
              <Button variant="ghost">首页</Button>
              <Button variant="ghost">博客</Button>
              <Button variant="ghost">项目</Button>
              <Button variant="ghost">关于</Button>
              <div class="flex items-center justify-end">
                <DropdownMenu>
                  <DropdownMenuTrigger as-child>
                    <Button variant="outline">
                      <Icon icon="radix-icons:moon"
                        class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                      <Icon icon="radix-icons:sun"
                        class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                      <span class="sr-only">Toggle theme</span>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem @click="mode = 'light'">
                      Light
                    </DropdownMenuItem>
                    <DropdownMenuItem @click="mode = 'dark'">
                      Dark
                    </DropdownMenuItem>
                    <DropdownMenuItem @click="mode = 'auto'">
                      System
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </nav>
          </div>
  
        </div>
      </nav>
  
      <!-- 主要内容 -->
      <main class="container pt-24">
        <!-- 个人简介 -->
        <section class="flex flex-col items-center justify-center space-y-4 text-center">
          <Avatar class="h-24 w-24">
            <AvatarImage src="/avatar.jpg" />
            <AvatarFallback>橘子</AvatarFallback>
          </Avatar>
          <h1 class="text-4xl font-bold">橘子</h1>
          <p class="text-xl text-muted-foreground">
            全栈开发工程师 / Vue.js 专家
          </p>
          <div class="flex space-x-4">
            <Button>
              <Github class="mr-2 h-4 w-4" />
              GitHub
            </Button>
            <Button variant="outline">
              <Twitter class="mr-2 h-4 w-4" />
              Twitter
            </Button>
          </div>
        </section>
  
        <!-- 技能卡片 -->
        <section class="mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <Card v-for="skill in skills" :key="skill.title">
            <CardHeader>
              <CardTitle>{{ skill.title }}</CardTitle>
            </CardHeader>
            <CardContent>
              <p>{{ skill.description }}</p>
            </CardContent>
          </Card>
        </section>
  
        <!-- 项目展示 -->
        <section class="mt-16">
          <h2 class="text-2xl font-bold mb-8">项目展示</h2>
          <div class="grid gap-6 sm:grid-cols-2">
            <Card v-for="project in projects" :key="project.title">
              <CardHeader>
                <CardTitle>{{ project.title }}</CardTitle>
                <CardDescription>{{ project.description }}</CardDescription>
              </CardHeader>
              <CardContent>
                <img :src="project.image" :alt="project.title" class="rounded-lg w-full h-48 object-cover" />
              </CardContent>
              <CardFooter>
                <Button variant="outline" class="w-full">
                  查看详情
                </Button>
              </CardFooter>
            </Card>
          </div>
        </section>
      </main>
  
     <Footer></Footer>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { Button } from '@/components/ui/button'
  import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
  import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
  import { Github, Twitter } from 'lucide-vue-next'
  import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
  import { Icon } from '@iconify/vue'
  import { useColorMode } from '@vueuse/core'
  import Footer from '@/components/own/footer/Footer.vue'
  
  // Pass { disableTransition: false } to enable transitions
  const mode = useColorMode()
  
  const skills = ref([
    {
      title: '前端开发',
      description: '精通 Vue.js、React、TypeScript 等现代前端技术栈',
    },
    {
      title: 'UI/UX 设计',
      description: '具有良好的设计感，熟悉 Figma、Sketch 等设计工具',
    },
    {
      title: '后端开发',
      description: '了解 Node.js、Express、MongoDB 等后端技术',
    },
  ])
  
  const projects = ref([
    {
      title: '个人博客系统',
      description: '基于 Vue 3 + TypeScript 的现代化博客系统',
      image: '/projects/blog.jpg',
    },
    {
      title: '在线教育平台',
      description: '使用 Next.js + Tailwind CSS 开发的教育平台',
      image: '/projects/education.jpg',
    },
    {
      title: '个人博客系统',
      description: '基于 Vue 3 + TypeScript 的现代化博客系统',
      image: '/projects/blog.jpg',
    },
    {
      title: '在线教育平台',
      description: '使用 Next.js + Tailwind CSS 开发的教育平台',
      image: '/projects/education.jpg',
    },
    {
      title: '个人博客系统',
      description: '基于 Vue 3 + TypeScript 的现代化博客系统',
      image: '/projects/blog.jpg',
    },
    {
      title: '在线教育平台',
      description: '使用 Next.js + Tailwind CSS 开发的教育平台',
      image: '/projects/education.jpg',
    },
    {
      title: '个人博客系统',
      description: '基于 Vue 3 + TypeScript 的现代化博客系统',
      image: '/projects/blog.jpg',
    },
    {
      title: '在线教育平台',
      description: '使用 Next.js + Tailwind CSS 开发的教育平台',
      image: '/projects/education.jpg',
    },
    {
      title: '个人博客系统',
      description: '基于 Vue 3 + TypeScript 的现代化博客系统',
      image: '/projects/blog.jpg',
    },
    {
      title: '在线教育平台',
      description: '使用 Next.js + Tailwind CSS 开发的教育平台',
      image: '/projects/education.jpg',
    },
  ])
  
  </script>

